<template>
  <div>
    <el-table
      :data="form.tableData"
      size="default"
      class="mapping-table"
      :tooltip-effect="xvueTheme"
    >
      <el-table-column
        prop="field"
        :label="$demoi18n('panelData.mapping.field')"
        width="50"
        :render-header="renderTableHeader"
      ></el-table-column>
      <el-table-column
        :label="$demoi18n('panelData.mapping.mapping')"
        min-width="100"
        :render-header="renderTableHeader"
      >
        <template #default="scope">
          <div
            v-if="scope.row.field === 'y3'"
            class="table-span"
          >
            <el-tooltip
              v-if="xvueLanguage !== 'zh-CN'"
              placement="top"
              :content="$demoi18n('panelData.totalGrowth_totalLoss')"
              :effect="xvueTheme"
            >
              <span>{{ $demoi18n('panelData.totalGrowth_totalLoss') }}</span>
            </el-tooltip>
            <span v-else>{{ $demoi18n('panelData.totalGrowth_totalLoss') }}</span>
          </div>
          <div v-else>
            <span class="mapping-scope">*</span>
            <VsFormItem
              :prop="`tableData[${scope.$index}].mapping`"
              :rules="
                generateExceptionRules({
                  required: !scope.row.skipVerification,
                  label: $demoi18n(scope.row.explain),
                })
              "
            >
              <!-- xTag 下拉项 -->
              <el-select
                v-if="form.dataSourceType === 'xTag'"
                v-model="scope.row.mapping"
                :class="'panel-data-select-' + xvueTheme"
                :popper-class="'select-poper-' + xvueTheme"
                filterable
                clearable
                placeholder
                size="default"
                @focus="setXtagMaxWidth"
                @visible-change="setTagTitle($event)"
                @change="optionxTagChange(scope.row)"
              >
                <el-option
                  v-for="(item, index) in commonComp.mappingOptionsXTag"
                  :key="item.id"
                  class="panel-data-select-option"
                  :label="item.option_label"
                  :value="item.option_label"
                  :style="selectxTagStyle"
                >
                  <div
                    v-if="item.type && item.type === 'add'"
                    @click.stop="optionxTagClick(item, scope.row, 'fromChild')"
                  >
                    <span class="select-option-slot-icon">
                      <el-button
                        :link="true"
                        type="primary"
                        class="select-icon"
                      >
                        <el-icon><Plus /></el-icon>
                      </el-button>
                    </span>
                    <span
                      class="select-option-slot-text"
                      :style="{ width: `${xTagTextWidth}px` }"
                    >&nbsp;{{ item.option_label }}</span>
                  </div>
                  <div v-else-if="item.type && item.type === 'edit'">
                    <span class="select-option-slot-icon select-option-slot-icon-edit">
                      <el-button
                        :link="true"
                        type="primary"
                        class="select-icon"
                        :title="$demoi18n('btn.edit')"
                        @click.stop="optionxTagClick(item, scope.row, 'fromChild')"
                      >
                        <el-icon><EditPen /></el-icon>
                      </el-button>
                      <el-button
                        :link="true"
                        type="primary"
                        class="select-icon"
                        :title="$demoi18n('btn.delete')"
                        @click.stop="optionxTagDelete(index)"
                      >
                        <el-icon><Delete /></el-icon>
                      </el-button>
                    </span>
                    <span
                      class="select-option-slot-text"
                      :style="{ width: `${xTagTextWidth}px` }"
                    >{{
                      item.option_label
                    }}</span>
                  </div>
                  <div v-else>
                    <span>{{ item.option_label }}</span>
                  </div>
                </el-option>
              </el-select>

              <!-- xMiner 下拉项 -->
              <el-select
                v-else
                v-model="scope.row.mapping"
                :class="'panel-data-select-' + xvueTheme"
                :popper-class="'select-poper-' + xvueTheme"
                filterable
                clearable
                placeholder
                size="default"
                @focus="setMaxWidth"
                @visible-change="setTagTitle($event)"
              >
                <el-option
                  v-for="item in commonComp.mappingOptions"
                  :key="item.id"
                  class="panel-data-select-option"
                  :label="item.option_label"
                  :value="item.option_value"
                  :style="selectStyle"
                >
                  <div
                    class="vs_ellipsis"
                    :title="`${item.option_label} (${item.option_value})`"
                  >{{ item.option_label }}</div>
                </el-option>
              </el-select>
            </VsFormItem>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :label="$demoi18n('panel.th.legendName')"
        min-width="100"
        :render-header="renderTableHeader"
      >
        <template #default="scope">
          <VsFormItem
            :prop="`tableData[${scope.$index}].legendName`"
            :rules="
              generateRules({
                required: false,
                label: $demoi18n('panel.th.legendName'),
              })
            "
          >
            <el-input
              v-if="!scope.row.hideLegendName"
              v-model="scope.row.legendName"
              :placeholder="$demoi18n('word.plsInput')"
              size="default"
            ></el-input>
          </VsFormItem>
        </template>
      </el-table-column>
      <el-table-column
        prop="explain"
        :label="$demoi18n('panel.th.explain')"
        min-width="70"
        :render-header="renderTableHeader"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span>{{ $demoi18n(scope.row.explain) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang='jsx'>
import xTagBase from '../xtag-base.js';

/**
 * config  整体配置项
 * dataForm   初始表单的字段
 */
const xMiner = 'xMiner';
const xTag = 'xTag';
export default {
  name: 'PanelData',
  mixins: [xTagBase],
  props: ['config', 'widgetInstanceId', 'dataForm', 'dataSourceTypeOptions', 'commonComp'],
  data() {
    return {
      xMiner,
      xTag,
      propertyData: this.property,
      form: {},
      count: {
        y: 0,
        z: 0,
      },
      barAddDisable: false,
      lineAddDisable: false,
      index: 0,
      isUnitShow: false,
      xTagTextWidth: 100,
      xvueLanguage: window._adoPremise.language || 'zh-CN',
    };
  },
  computed: {},
  watch: {},
  created() {
    this.form = this.dataForm;
    if (this.config) {
      const dataConfig = JSON.parse(JSON.stringify(this.config.config.data));
      this.loadData(dataConfig);
    }
  },
  methods: {
    renderTableHeader({ column }) {
      return (
        <el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
          <span>{column.label}</span>
        </el-tooltip>
      );
    },
  },
};
</script>
<style lang="less" scoped>
.prop-form {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}

.table-span {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-button--primary.is-plain {
  margin: 10px 0 10px 10px;
}
:deep(.el-table) {
  .cell {
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

<style lang="less">
.panel-data-select-dark {
  :deep(.el-input) {
    .el-input__inner {
      border-color: #588ba8;
      color: #fff;
      background-color: #091a2d;
    }
    .el-input__icon {
      color: #588ba8;
    }
  }
}

.select-poper-dark {
  background-color: #091a2d;
  border-color: #588ba8;

  :deep(.el-scrollbar) {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #fff;
        background-color: #091a2d;

        .select-icon {
          margin-left: 0;
          padding: 0;
        }

        .select-option-slot-text {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #178ddf;
        }
        .select-option-slot-icon {
          display: inline-block;
          vertical-align: top;
        }
      }
      .hover {
        background-color: #102e4f;
      }
    }
  }
  :deep(.popper__arrow) {
    border-bottom-color: #588ba8;
    &::after {
      border-bottom-color: #091a2d !important;
    }
  }
}

.select-poper-light {
  :deep(.el-scrollbar) {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        .select-icon {
          margin-left: 0;
          padding: 0;
        }

        .select-option-slot-text {
          display: inline-block;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .select-option-slot-icon {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }
}
</style>
